<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字母魔法王国 - 幼儿园英语启蒙</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
            background: linear-gradient(135deg, #E6F3FF 0%, #FFF0F5 50%, #F0FFF0 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            animation: bounce 2s infinite;
        }

        .title {
            font-size: 3rem;
            color: #FF69B4;
            text-shadow: 3px 3px 0px #FFB6C1;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1.5rem;
            color: #9370DB;
            margin-bottom: 20px;
        }

        .game-area {
            background: white;
            border-radius: 30px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        .game-area::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(255,255,255,0.1) 10px,
                rgba(255,255,255,0.1) 20px
            );
            animation: float 20s linear infinite;
        }

        .game-modes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .game-card {
            background: linear-gradient(135deg, #DDA0DD 0%, #FFB6C1 100%);
            border-radius: 25px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .game-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }

        .game-card h3 {
            font-size: 1.8rem;
            color: white;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .game-card p {
            font-size: 1.1rem;
            color: white;
            opacity: 0.9;
        }

        .game-card::after {
            content: '🌟';
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 2rem;
            animation: twinkle 1.5s infinite;
        }

        .alphabet-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 15px;
            margin: 20px 0;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .letter-card {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #98FB98 0%, #87CEEB 100%);
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .letter-card:hover {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .letter-card.correct {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%) !important;
            animation: correctPulse 0.6s ease;
        }

        .letter-card.wrong {
            background: linear-gradient(135deg, #FF5252 0%, #FF7043 100%) !important;
            animation: shake 0.5s ease;
        }

        .letter-card.highlight {
            background: linear-gradient(135deg, #FFD700 0%, #FFA726 100%) !important;
            animation: glow 1s infinite alternate;
        }

        .letter {
            font-size: 2.5rem;
            font-weight: bold;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            margin-bottom: 5px;
        }

        .phonics {
            font-size: 1rem;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .word-display {
            background: linear-gradient(135deg, #FFE66D 0%, #FF6B6B 100%);
            border-radius: 25px;
            padding: 40px;
            text-align: center;
            margin: 20px 0;
            color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .big-letter {
            font-size: 5rem;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
        }

        .word-example {
            font-size: 2rem;
            margin: 10px 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .phonics-sound {
            font-size: 1.5rem;
            opacity: 0.9;
        }

        .controls {
            text-align: center;
            margin: 20px 0;
        }

        .btn {
            font-size: 1.3rem;
            padding: 15px 30px;
            margin: 10px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-success {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .score-board {
            background: linear-gradient(135deg, #FF9FF3 0%, #54A0FF 100%);
            border-radius: 25px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            transition: width 0.5s ease;
            border-radius: 10px;
        }

        .celebration {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }

        .star {
            position: absolute;
            font-size: 2rem;
            animation: fall 3s linear forwards;
        }

        .instructions {
            background: #F0F8FF;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 5px solid #9370DB;
        }

        .instructions h4 {
            color: #6A5ACD;
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .instructions p {
            color: #7B68EE;
            font-size: 1.2rem;
            line-height: 1.6;
        }

        .matching-game {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 20px 0;
        }

        .letter-pool, .picture-pool {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .picture-card {
            aspect-ratio: 1;
            background: white;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .picture-card:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .picture-card.matched {
            background: #4CAF50;
            transform: scale(0.9);
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        @keyframes twinkle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        @keyframes float {
            0% { transform: translateX(-100%) translateY(-100%) rotate(0deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(360deg); }
        }

        @keyframes correctPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        @keyframes glow {
            from { box-shadow: 0 0 10px #FFD700; }
            to { box-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700; }
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .animal-friend {
            position: absolute;
            font-size: 3rem;
            animation: float-animal 3s ease-in-out infinite;
        }

        @keyframes float-animal {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        @media (max-width: 768px) {
            .title {
                font-size: 2rem;
            }
            
            .alphabet-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .letter {
                font-size: 2rem;
            }
            
            .matching-game {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="title">🌈 字母魔法王国 🌈</h1>
            <p class="subtitle">和可爱的小动物一起探索英文字母的奥秘！</p>
        </div>

        <div class="score-board">
            <div>⭐ 魔法星星: <span id="score">0</span> 颗</div>
            <div class="progress-bar">
                <div class="progress-fill" id="progress" style="width: 0%"></div>
            </div>
        </div>

        <div class="game-area">
            <div id="game-selection">
                <h2 style="text-align: center; color: #FF69B4; margin-bottom: 20px;">选择你喜欢的字母游戏吧！</h2>
                <div class="game-modes">
                    <div class="game-card" onclick="startGame('alphabet')">
                        <h3>🔤 字母认知</h3>
                        <p>学习26个英文字母的形状和发音</p>
                    </div>
                    <div class="game-card" onclick="startGame('phonics')">
                        <h3>🎵 字母音标</h3>
                        <p>学习字母的发音和对应单词</p>
                    </div>
                    <div class="game-card" onclick="startGame('matching')">
                        <h3>🎯 字母配对</h3>
                        <p>把字母和对应的图片连起来</p>
                    </div>
                </div>
            </div>

            <div id="game-instructions" style="display: none;">
                <div class="instructions">
                    <h4 id="instruction-title">游戏说明</h4>
                    <p id="instruction-text">点击开始游戏吧！</p>
                </div>
            </div>

            <div id="alphabet-display" style="display: none;">
                <div class="word-display">
                    <div class="big-letter" id="current-letter">A</div>
                    <div class="word-example" id="word-example">Apple</div>
                    <div class="phonics-sound" id="phonics-sound">/æ/ - "a" for apple</div>
                </div>
            </div>

            <div id="alphabet-grid" class="alphabet-grid" style="display: none;"></div>
            
            <div id="matching-game" class="matching-game" style="display: none;">
                <div>
                    <h3 style="text-align: center; color: #9370DB;">字母</h3>
                    <div class="letter-pool" id="letter-pool"></div>
                </div>
                <div>
                    <h3 style="text-align: center; color: #9370DB;">图片</h3>
                    <div class="picture-pool" id="picture-pool"></div>
                </div>
            </div>

            <div class="controls">
                <button class="btn btn-primary" onclick="startGame(currentGame)" id="start-btn">开始游戏</button>
                <button class="btn btn-success" onclick="backToMenu()" style="display: none;" id="back-btn">返回菜单</button>
                <button class="btn" onclick="nextLetter()" style="display: none;" id="next-btn">下一个</button>
            </div>
        </div>
    </div>

    <div class="celebration" id="celebration"></div>

    <script>
        let currentGame = null;
        let score = 0;
        let currentLetterIndex = 0;
        let selectedCard = null;
        let matchedPairs = 0;

        // 字母数据
        const alphabetData = [
            { letter: 'A', word: 'Apple', phonics: '/æ/', sound: 'a' },
            { letter: 'B', word: 'Ball', phonics: '/b/', sound: 'b' },
            { letter: 'C', word: 'Cat', phonics: '/k/', sound: 'c' },
            { letter: 'D', word: 'Dog', phonics: '/d/', sound: 'd' },
            { letter: 'E', word: 'Elephant', phonics: '/e/', sound: 'e' },
            { letter: 'F', word: 'Fish', phonics: '/f/', sound: 'f' },
            { letter: 'G', word: 'Giraffe', phonics: '/g/', sound: 'g' },
            { letter: 'H', word: 'Hat', phonics: '/h/', sound: 'h' },
            { letter: 'I', word: 'Ice cream', phonics: '/i/', sound: 'i' },
            { letter: 'J', word: 'Juice', phonics: '/dʒ/', sound: 'j' },
            { letter: 'K', word: 'Kite', phonics: '/k/', sound: 'k' },
            { letter: 'L', word: 'Lion', phonics: '/l/', sound: 'l' },
            { letter: 'M', word: 'Monkey', phonics: '/m/', sound: 'm' },
            { letter: 'N', word: 'Nest', phonics: '/n/', sound: 'n' },
            { letter: 'O', word: 'Orange', phonics: '/o/', sound: 'o' },
            { letter: 'P', word: 'Penguin', phonics: '/p/', sound: 'p' },
            { letter: 'Q', word: 'Queen', phonics: '/kw/', sound: 'q' },
            { letter: 'R', word: 'Rabbit', phonics: '/r/', sound: 'r' },
            { letter: 'S', word: 'Sun', phonics: '/s/', sound: 's' },
            { letter: 'T', word: 'Tiger', phonics: '/t/', sound: 't' },
            { letter: 'U', word: 'Umbrella', phonics: '/u/', sound: 'u' },
            { letter: 'V', word: 'Violin', phonics: '/v/', sound: 'v' },
            { letter: 'W', word: 'Whale', phonics: '/w/', sound: 'w' },
            { letter: 'X', word: 'Xylophone', phonics: '/ks/', sound: 'x' },
            { letter: 'Y', word: 'Yo-yo', phonics: '/j/', sound: 'y' },
            { letter: 'Z', word: 'Zebra', phonics: '/z/', sound: 'z' }
        ];

        // 图片对应数据
        const pictureData = {
            'A': '🍎', 'B': '⚽', 'C': '🐱', 'D': '🐕', 'E': '🐘',
            'F': '🐟', 'G': '🦒', 'H': '👒', 'I': '🍦', 'J': '🥤',
            'K': '🪁', 'L': '🦁', 'M': '🐵', 'N': '🪹', 'O': '🍊',
            'P': '🐧', 'Q': '👑', 'R': '🐰', 'S': '☀️', 'T': '🐅',
            'U': '☂️', 'V': '🎻', 'W': '🐋', 'X': '🎹', 'Y': '🪀', 'Z': '🦓'
        };

        // 音效系统
        const sounds = {
            correct: new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT'),
            wrong: new Audio('data:audio/wav;base64,UklGRuICAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YcACAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT'),
            success: new Audio('data:audio/wav;base64,UklGRuICAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YcACAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT')
        };

        function playSound(type) {
            try {
                sounds[type].currentTime = 0;
                sounds[type].play().catch(() => {});
            } catch (e) {}
        }

        function updateScore(points) {
            score += points;
            document.getElementById('score').textContent = score;
            updateProgress();
        }

        function updateProgress() {
            const progress = Math.min((score / 52) * 100, 100);
            document.getElementById('progress').style.width = progress + '%';
        }

        function createCelebration() {
            const celebration = document.getElementById('celebration');
            const emojis = ['⭐', '🌟', '✨', '🎉', '🎊', '🏆', '🎈', '🎪'];
            
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    const star = document.createElement('div');
                    star.className = 'star';
                    star.textContent = emojis[Math.floor(Math.random() * emojis.length)];
                    star.style.left = Math.random() * 100 + '%';
                    star.style.animationDelay = Math.random() * 2 + 's';
                    celebration.appendChild(star);
                    
                    setTimeout(() => star.remove(), 3000);
                }, i * 100);
            }
        }

        function startGame(gameType) {
            currentGame = gameType;
            document.getElementById('game-selection').style.display = 'none';
            document.getElementById('game-instructions').style.display = 'block';
            document.getElementById('back-btn').style.display = 'inline-block';
            
            switch(gameType) {
                case 'alphabet':
                    document.getElementById('instruction-title').textContent = '🔤 字母认知';
                    document.getElementById('instruction-text').textContent = '点击字母卡片，学习26个英文字母的形状！每学一个字母就能获得星星奖励！';
                    document.getElementById('alphabet-grid').style.display = 'grid';
                    initAlphabetGame();
                    break;
                case 'phonics':
                    document.getElementById('instruction-title').textContent = '🎵 字母音标';
                    document.getElementById('instruction-text').textContent = '学习每个字母的发音和对应的单词！';
                    document.getElementById('alphabet-display').style.display = 'block';
                    document.getElementById('next-btn').style.display = 'inline-block';
                    initPhonicsGame();
                    break;
                case 'matching':
                    document.getElementById('instruction-title').textContent = '🎯 字母配对';
                    document.getElementById('instruction-text').textContent = '把字母和对应的图片连起来！';
                    document.getElementById('matching-game').style.display = 'grid';
                    initMatchingGame();
                    break;
            }
        }

        function initAlphabetGame() {
            const grid = document.getElementById('alphabet-grid');
            grid.innerHTML = '';
            
            alphabetData.forEach((item, index) => {
                const card = document.createElement('div');
                card.className = 'letter-card';
                card.style.background = getRainbowGradient(index);
                card.innerHTML = `
                    <div class="letter">${item.letter}</div>
                    <div class="phonics">${item.word}</div>
                `;
                card.onclick = () => handleAlphabetClick(item, card);
                grid.appendChild(card);
            });
        }

        function initPhonicsGame() {
            currentLetterIndex = 0;
            displayCurrentLetter();
        }

        function displayCurrentLetter() {
            const current = alphabetData[currentLetterIndex];
            document.getElementById('current-letter').textContent = current.letter;
            document.getElementById('word-example').textContent = current.word;
            document.getElementById('phonics-sound').textContent = `${current.phonics} - "${current.sound}" for ${current.word.toLowerCase()}`;
        }

        function nextLetter() {
            currentLetterIndex = (currentLetterIndex + 1) % alphabetData.length;
            displayCurrentLetter();
            updateScore(2);
            
            if (currentLetterIndex === 0) {
                setTimeout(() => {
                    alert('🎉 太棒了！你已经学完所有字母了！');
                    createCelebration();
                }, 500);
            }
        }

        function initMatchingGame() {
            const letters = Object.keys(pictureData);
            const selectedLetters = letters.sort(() => Math.random() - 0.5).slice(0, 8);
            
            const letterPool = document.getElementById('letter-pool');
            const picturePool = document.getElementById('picture-pool');
            
            letterPool.innerHTML = '';
            picturePool.innerHTML = '';
            
            selectedLetters.forEach(letter => {
                // 字母卡片
                const letterCard = document.createElement('div');
                letterCard.className = 'letter-card';
                letterCard.style.background = getRainbowGradient(letter.charCodeAt(0) - 65);
                letterCard.innerHTML = `<div class="letter">${letter}</div>`;
                letterCard.dataset.letter = letter;
                letterCard.onclick = () => handleMatchingClick(letterCard, 'letter');
                letterPool.appendChild(letterCard);
                
                // 图片卡片
                const pictureCard = document.createElement('div');
                pictureCard.className = 'picture-card';
                pictureCard.textContent = pictureData[letter];
                pictureCard.dataset.letter = letter;
                pictureCard.onclick = () => handleMatchingClick(pictureCard, 'picture');
                picturePool.appendChild(pictureCard);
            });
            
            // 打乱顺序
            Array.from(picturePool.children).forEach(card => {
                picturePool.appendChild(card);
            });
        }

        function handleAlphabetClick(item, card) {
            card.classList.add('correct');
            playSound('correct');
            updateScore(1);
            
            setTimeout(() => {
                card.classList.remove('correct');
            }, 1000);
        }

        function handleMatchingClick(card, type) {
            if (card.classList.contains('matched')) return;
            
            if (!selectedCard) {
                selectedCard = card;
                card.classList.add('highlight');
            } else {
                if (selectedCard.dataset.letter === card.dataset.letter && selectedCard !== card) {
                    // 匹配成功
                    selectedCard.classList.add('matched');
                    card.classList.add('matched');
                    selectedCard.classList.remove('highlight');
                    playSound('correct');
                    updateScore(5);
                    matchedPairs++;
                    
                    if (matchedPairs === 8) {
                        setTimeout(() => {
                            alert('🎉 太棒了！你完成了所有配对！');
                            createCelebration();
                            initMatchingGame();
                        }, 500);
                    }
                } else {
                    // 匹配失败
                    selectedCard.classList.add('wrong');
                    card.classList.add('wrong');
                    playSound('wrong');
                    
                    setTimeout(() => {
                        selectedCard.classList.remove('wrong', 'highlight');
                        card.classList.remove('wrong');
                    }, 500);
                }
                selectedCard = null;
            }
        }

        function getRainbowGradient(index) {
            const gradients = [
                'linear-gradient(135deg, #FF6B6B, #FF8E53)',
                'linear-gradient(135deg, #FF8E53, #FF6B6B)',
                'linear-gradient(135deg, #4ECDC4, #44A08D)',
                'linear-gradient(135deg, #44A08D, #4ECDC4)',
                'linear-gradient(135deg, #667eea, #764ba2)',
                'linear-gradient(135deg, #764ba2, #667eea)',
                'linear-gradient(135deg, #f093fb, #f5576c)',
                'linear-gradient(135deg, #f5576c, #f093fb)',
                'linear-gradient(135deg, #4facfe, #00f2fe)',
                'linear-gradient(135deg, #00f2fe, #4facfe)'
            ];
            return gradients[index % gradients.length];
        }

        function backToMenu() {
            document.getElementById('game-selection').style.display = 'block';
            document.getElementById('game-instructions').style.display = 'none';
            document.getElementById('alphabet-grid').style.display = 'none';
            document.getElementById('alphabet-display').style.display = 'none';
            document.getElementById('matching-game').style.display = 'none';
            document.getElementById('next-btn').style.display = 'none';
            document.getElementById('back-btn').style.display = 'none';
            currentGame = null;
            matchedPairs = 0;
            selectedCard = null;
        }

        // 添加可爱的动物朋友
        function addAnimalFriends() {
            const animals = ['🦋', '🐝', '🦄', '🐰', '🐻', '🐨', '🦁', '🐸', '🦊', '🐵'];
            const container = document.querySelector('.container');
            
            animals.forEach((animal, index) => {
                const friend = document.createElement('div');
                friend.className = 'animal-friend';
                friend.textContent = animal;
                friend.style.left = (5 + index * 9) + '%';
                friend.style.top = (5 + Math.random() * 15) + '%';
                friend.style.animationDelay = (index * 0.3) + 's';
                container.appendChild(friend);
            });
        }

        // 页面加载完成后添加动物朋友
        window.addEventListener('load', addAnimalFriends);
    </script>
</body>
</html>
